<template>
  <div class="home-box">
    <div class="header-top">
      <h1>{{ title }}</h1>
      <span v-if="site&&site.state!==0">{{ groupname[site.state] }}率先完成任务</span>
    </div>
    <timedown></timedown>
    <div class="main-box">
      <div class="content-box" v-html="content"></div>
    </div>
    <div class="option-box" v-if="site&&site.state === 0">
      <button @click="$router.push({name: 'upload',params:{id: $route.params.id}})">提交任务</button>
    </div>
  </div>
</template>

<script>
import timedown from '@/components/time-down'
export default {
  name: 'introduction',
  components: {
    timedown
  },
  data () {
    return {
      title: '加载中..',
      content: '加载中..',
      site: null,
      groupname: ['Team Admin', '佩奇队', '全职高手队', '那强那稳队', '春游队', '逢春队', 'DJ喜洋洋队', '农药队', '吃鸡队', '大鹏队']
    }
  },
  created () {
    this.getContent()
  },
  methods: {
    getContent: function () {
      this.$http.get('/server/job/getJobDetailByJobId/' + this.$route.params.id)
        .then(function (res) {
          this.site = res.data.data
          this.title = res.data.data.jobName
          this.content = this.regContent(res.data.data.jobDescription)
        })
    },
    regContent: function (html) {
      let img = html.replace(/\.\.\//g, /static/)
      let noSpace = img.replace(/<.*\s+?img/g, '<img style="width:100%;" alt=""')
      console.log(noSpace)
      return noSpace
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .home-box{
    position: relative;
    height: 100%;
    width: 100%;
    padding: 10px;
    background-image: url(../assets/longFlower.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    overflow-y: auto;
  }
  @media screen and (max-width: 600px) {
    .home-box{
      background-image: url(../assets/flower.jpg);
    }
  }
  .header-top{
    position: relative;
  }
  .header-top>h1{
    margin-right: 40%;
    padding-left: 10px;
    line-height: 50px;
    font-size: 24px;
    color: #fff;
    text-align: left;
    font-weight: 700;
  }
  .header-top>span{
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    color: red;
    line-height: 2em;
  }
  .score-display>span{
    display: block;
    height: 40%;
    line-height: initial;
    color: #fff;
    font-size: 14px;
  }
  .score-display>b{
    display: block;
    height: 60%;
    line-height: initial;
    color: #FFCC00;
    font-size: 28px;
  }
  .main-box{
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 10px 30px;
    margin-top: -2px;
    background: rgba(166, 173, 197, 0.5);
    border: 1px solid #000;
  }
  .content-box{
    line-height: 1.5em;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    color: #fff;
  }
  .option-box{
    margin-top: 20px;
  }
  .option-box>button{
    padding: 5px 15px;
    border-radius: 5px;
    border: none;
    background: #ff9036;
    color: #fff;
    box-shadow: .01rem .01rem .1rem rgba(0, 0, 0, .5), 0 0 .05rem rgba(240, 240, 240, .5), .05rem .05rem .01rem rgba(255, 255, 255, .15) inset, .1rem .1rem .1rem rgba(255, 255, 255, .05) inset, -.05rem -.05rem .25rem rgba(0, 0, 0, .15) inset, -.1rem -.1rem .35rem rgba(0, 0, 0, .05) inset;
    font-size: 14px;
    transition-duration: 200ms;
    cursor: pointer;
    outline: none;
  }
  .option-box>button:hover,.option-box>button:active{
    background: #ffb601;
  }
</style>
